<template>
	<div class="menuManage">
		<div class="public-search-box">
			<el-form inline
					 ref="searchRef"
					 :model="searchData">
				<el-form-item>
					<el-input v-model="searchData.name"
							  size="small"
							  clearable
							  placeholder="名称"
							  @input="getList">
					</el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary"
							   size="small"
							   icon="el-icon-search"
							   v-if="hasPerm('menu:list')"
							   @click="getList">查询
					</el-button>
					<el-button type="primary"
							   size="small"
							   icon="el-icon-plus"
							   v-if="hasPerm('menu:add')"
							   @click="addOrUpdate('add')">新增
					</el-button>
				</el-form-item>
			</el-form>
		</div>
		<div class="public-table"
			 v-loading="loading"
			 element-loading-text="拼命加载中...">
			<el-table :data="dataList"
					  height="calc(100vh - 114px - 61px - 30px - 15px)"
					  style="width: 100%;"
					  row-key="id"
					  :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
				<el-table-column prop="name"
								 label="名称"
								 width="180"
								 align="center">
				</el-table-column>
				<el-table-column prop="icon"
								 label="图标"
								 align="center"
								 width="180">
					<template slot-scope="scope">
						<i :class="scope.row.icon" style="font-size:20px;"></i>
					</template>
				</el-table-column>
				<el-table-column prop="status"
								 label="状态"
								 align="center"
								 width="180">
					<template slot-scope="scope">
						<span v-if="scope.row.status === '0'" style="color: #f78989">禁用</span>
						<span v-if="scope.row.status === '1'" style="color: #409eff">正常</span>
					</template>
				</el-table-column>
				<el-table-column prop="sort"
								 label="排序"
								 align="center"
								 width="180">
				</el-table-column>
				<el-table-column prop="type"
								 label="类别"
								 align="center"
								 width="180">
					<template slot-scope="scope">
						<el-tag v-if="scope.row.type === '1'" type="warning">目录</el-tag>
						<el-tag v-if="scope.row.type === '2'">菜单</el-tag>
						<el-tag v-if="scope.row.type === '3'" type="danger">按钮</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="permission"
								 label="权限标识"
								 align="center"
								 width="180">
				</el-table-column>
				<el-table-column prop="component"
								 label="组件路径"
								 align="center"
								 width="250">
				</el-table-column>
				<el-table-column prop="created_time"
								 align="center"
								 label="创建时间">
					<template slot-scope='scope'>
						<span>{{ scope.row.created_time | dateTime }}</span>
					</template>
				</el-table-column>
				<el-table-column label="操作"
								 align="center">
					<template slot-scope="scope">
						<el-button type="primary"
								   size="small"
								   v-if="hasPerm('menu:edit')"
								   @click="addOrUpdate('update', scope.row)">修改
						</el-button>
						<el-button type="danger"
								   size="small"
								   v-if="hasPerm('menu:delete')"
								   @click="del(scope.row)">删除
						</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<el-dialog title="提示"
				   custom-class="public-dialog"
				   :visible.sync="addOrUpdateVisible"
				   :close-on-click-modal="false"
				   @close="close"
				   width="550px">
			<el-form ref="addOrUpdateRef"
					 :model="saveData"
					 :rules="addOrUpdateRules"
					 label-width="80px">
				<el-form-item label="上级菜单"
							  prop="parentId">
					<treeselect v-model="saveData.parentId"
								style="line-height: initial"
								:normalizer="normalizer"
								placeholder="选择上级菜单"
								:multiple="false"
								:options="dataList"/>
				</el-form-item>
				<el-form-item label="菜单类型"
							  prop="type">
					<el-radio-group v-model="saveData.type">
						<el-radio :label="'1'">目录</el-radio>
						<el-radio :label="'2'">菜单</el-radio>
						<el-radio :label="'3'">按钮</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-row>
					<el-col :span="12">
						<el-form-item label="名称"
									  prop="name">
							<el-input v-model="saveData.name"
									  size="small"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="排序"
									  prop="sort">
							<el-input-number v-model="saveData.sort"
											 size="small"
											 controls-position="right"></el-input-number>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="12">
						<el-form-item label="路由地址"
									  prop="path">
							<el-input v-model="saveData.path"
									  size="small"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="组件地址"
									  prop="component">
							<el-input v-model="saveData.component"
									  size="small"></el-input>
						</el-form-item>
					</el-col>
				</el-row>


				<el-row>
					<el-col :span="12">
						<el-form-item label="图标"
									  prop="icon">
							<el-input v-model="saveData.icon"
									  size="small"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="菜单状态"
									  prop="status">
							<el-radio-group v-model="saveData.status">
								<el-radio :label="'1'">正常</el-radio>
								<el-radio :label="'0'">禁用</el-radio>
							</el-radio-group>
						</el-form-item>
					</el-col>
				</el-row>
				<el-form-item label="授权标识"
							  prop="permission">
					<el-input v-model="saveData.permission"
							  placeholder="多个用逗号分隔,如：user:list,user:create"
							  size="small"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer"
				  class="dialog-footer">
                <el-button @click="close"
						   size="small">取 消</el-button>
                <el-button type="primary"
						   size="small"
						   @click="submit">确 定</el-button>
            </span>
		</el-dialog>
	</div>
</template>

<script>
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'

import { handleTree } from '@/utils'
import { menuApi } from '@/api'

export default {
	name: '',
	data () {
		return {
			normalizer (node) {
				return {
					label: node.name
				}
			},
			searchData: {
				name: ''
			},
			total: 10,
			loading: true,
			dataList: [],
			addOrUpdateVisible: false,
			saveData: {
				id: '',
				parentId: null,
				type: '1',
				name: '',
				permission: '',
				sort: '',
				component: '',
				path: '',
				icon: '',
				status: '1'
			},
			addOrUpdateRules: {
				name: {
					required: true,
					message: '请输入名称',
					trigger: 'blur'
				},
				sort: {
					required: true,
					message: '菜单顺序不能为空',
					trigger: 'blur'
				}
			}
		}
	},
	mounted () {
		this.getList()
	},
	methods: {
		// 获取列表
		async getList () {
			this.loading = true
			let params = Object.assign({}, this.searchData)
			const { err, data } = await menuApi.getList(params)
			if (err) {
				return false
			}
			this.dataList = handleTree(data)
			setTimeout(() => {
				this.loading = false
			}, 100)
		},
		addOrUpdate (type, item) {
			this.addOrUpdateVisible = true
			if (type === 'update') {
				this.getDetail(item)
			}
		},
		async getDetail (item) {
			const { err, data } = await menuApi.detailData(item.id)
			if (err) {
				return false
			}
			this.saveData.id = data.id
			if (data.parentId === '0') {
				this.saveData.parentId = null
			} else {
				this.saveData.parentId = data.parentId
			}
			this.saveData.name = data.name
			this.saveData.icon = data.icon
			this.saveData.sort = data.sort
			this.saveData.type = data.type
			this.saveData.path = data.path
			this.saveData.status = data.status
			this.saveData.component = data.component
			this.saveData.permission = data.permission
		},
		// 新增修改提交
		submit () {
			let api = null
			let message = ''
			this.$refs['addOrUpdateRef'].validate(async (valid) => {
				if (valid) {
					let params = Object.assign({}, this.saveData)
					if (params.parentId === null || params.parentId === undefined) {
						params.parentId = 0
					}
					if (params.id === '') {
						api = menuApi.addData
						message = '添加成功'
					} else {
						api = menuApi.updateData
						message = '更新成功'
					}
					const { err, data } = await api(params)
					if (err) {
						return false
					}
					this.$message({
						message: message,
						type: 'success'
					})
					this.close()
					this.getList()
				}
			})
		},
		// 删除
		del (item) {
			this.$confirm('确定删除当前数据吗？', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(async () => {
				let params = {
					id: item.id
				}
				const { err, data } = await menuApi.delData(params)
				if (err) {
					return false
				}
				this.$message({
					message: '删除成功',
					type: 'success'
				})
				this.getList()
			}).catch(() => {
			})
		},
		close () {
			this.addOrUpdateVisible = false
			this.saveData.id = ''
			this.$refs.addOrUpdateRef.resetFields()
		}
	},
	components: { Treeselect }
}
</script>

<style scoped lang='less'>
.menuManage {
	width: 100%;
}
</style>
